<template>
	<view :class="['page',openStar?'':'bgs']">
		<image class="dis_none" :src="imgPrefix('/static/image/teacher/index_header.png')"></image>
		<image class="dis_none" :src="imgPrefix('/static/image/teacher/wave.gif')"></image>
		<!-- 两张图预加载 -->
		<view class="star_page" v-if="openStar"><image :src="imgPrefix('/static/image/star_page.png')"></image></view>
		<block v-else>
			<image class="select_top p-a" :src="imgPrefix('/static/image/teacher/select_top.png')" mode="widthFix"></image>
			<image class="select_bottom p-a" :src="imgPrefix('/static/image/teacher/select_bottom.png')" mode="widthFix"></image>
			<view class="title_box" :style="{paddingTop:statusBarHeight+'px'}">
				<view class="f_56 navy_blue title f_f f_6">请选择您的身份</view>
				<view class="f_28 f_f welcome_text f_5">帮助我们更好的为您提供服务</view>
			</view>
			<view class="choose_box dis-flex flex-dir-column flex-y-center">
				<view class="dis-flex box box1-margin flex-y-center" @tap.stop="chooseIdentity(0)">
					<view class="icon"><image :src="imgPrefix('/static/image/teacher/student.png')"></image></view>
					<view class="identity">
						<view class="f_56 violet1 m-t-10 font_bebas">student</view>
						<view class="f_36 navy_blue f_6">我是学生</view>
					</view>
					<view class="select_view">
						<text :class="['select_icon',bindIndex==0?'active':'']"></text>
						<image v-if="bindIndex==0" class="select_img" :src="imgPrefix('/static/image/teacher/select_active_icon.png')"></image>
					</view>
				</view>
				<view class="dis-flex box flex-y-center" @tap.stop="chooseIdentity(1)">
					<view class="icon"><image :src="imgPrefix('/static/image/teacher/teacher.png')"></image></view>
					<view class="identity">
						<view class="f_56 violet1 m-t-10 font_bebas">teacher</view>
						<view class="f_36 navy_blue f_6">我是教师</view>
					</view>
					<view class="select_view">
						<text :class="['select_icon',bindIndex==1?'active':'']"></text>
						<image v-if="bindIndex==1" class="select_img" :src="imgPrefix('/static/image/teacher/select_active_icon.png')"></image>
					</view>
				</view>
			</view>
			<view class="confirm">
				<text class="f_f f_24 text dis-block">选定身份后不可更改</text>
				<view class="btn_view">
					<image @tap.stop="bindSelect" :class="['image',bindIndex==-1?'op':'']" :src="imgPrefix('/static/image/teacher/select_next.png')"></image>
				</view>
			</view>
			<zan-popup :show="showPopup">
				<view class="popup">
					<view class="top">
						<view class="title">身份确认</view>
						<view class="content">您选择的身份是：{{ bindIndex == 0 ? '学生' : '教师' }}确认之后无法再修改是否确认</view>
					</view>
					<view class="btn_bottom">
						<view class="return_icon" @tap.stop="bindReturn()">重新选择</view>
						<!-- 取消选择默认选择学生身份 -->
						<view class="next_icon">
							确认身份
							<button v-if="bindIndex == 0" class="share-btn" open-type="getUserInfo" @getuserinfo="getUserInfo"></button>
							<button v-else class="share-btn" open-type="getPhoneNumber" @getphonenumber="getWxPhone"></button>
						</view>
					</view>
				</view>
			</zan-popup>
		</block>
	</view>
</template>

<script>
import { commonMixinFun } from '@/static/mixins/common.js';
import { statusBarHeight } from '@/static/mixins/statusBarHeight.js';
import API from '@/static/api/index.js';
import request from '@/static/uitls/request.js';

import zanPopup from '@/components/popup/index.vue'; //弹出层
const app = getApp();
export default {
	mixins: [commonMixinFun,statusBarHeight],
	components: {
		zanPopup
	},
	data() {
		return {
			starLoadingTime: 1*1000, //首屏等待时间
			openStar: true,
			bindIndex: -1,
			showPopup:false,
			starTime:''
		};
	},
	onShow() {
		this.starTime = new Date().valueOf();
		let {starLoadingTime}=this;
		if(uni.getStorageSync('app_token')){//登录过的
			this.bindIndex=uni.getStorageSync('user_identity');
			console.log(this.bindIndex)
			this.loginFun(this.bindIndex,code=>{
				console.log(code)
				let times = new Date().valueOf() - this.starTime;
				if(code!=1){ //登录失败的
					setTimeout(()=>{
						this.openStar = false;
					},(starLoadingTime-times)>0?starLoadingTime-times:0)
				}
			})
		}else{
		this.bindIndex=-1;
			setTimeout(()=>{
				this.openStar = false;
			},starLoadingTime)
		}
	},
	methods: {
		bindReturn(){
			if(this.bindIndex==1){
				this.chooseIdentity(0)
				this.showToast('已为您选择了学生身份')
			}
			this.closePopup()
		},
		bindSelect(){
			// app._log(68)
			if(this.bindIndex!=-1){
				this.showPopup=true
			}else{
				this.showToast('请选择身份')
			}
		},
		closePopup() {
			this.showPopup=false
		},
		chooseIdentity(i) {
			this.bindIndex = i;
			app.globalData.userIdentity =i;
		},
		// 更新用户信息
		getUserInfo(e) {
			let _this = this;
			let { userInfo } = e.detail;
			app._log(userInfo);
			if (userInfo) {
				// 用户同意获取
				uni.setStorageSync('userInfo',JSON.stringify(userInfo))
				this.loginFun(1,code => {
					// 登录成功
					if (code == 1) {
						API.getMineInfo().then(({ code, data }) => {
							if (code == 1 && (userInfo.avatarUrl == '' || userInfo.nickName == '')) {
								API.updateUserInfo({
									avatar: userInfo.avatarUrl,
									nickname: userInfo.nickName
								}).then(res => {
									_this.pageTo('/pages/index/index');
								}).catch(err => {
									_this.pageTo('/pages/index/index');
								});
							}
						}).catch(err => {
							_this.pageTo('/pages/index/index');
						});
					} else {
						_this.pageTo('/pages/index/index');
					}
				},
				() => {
					_this.pageTo('/pages/index/index');
				}
				);
			} else {
				_this.pageTo('/pages/index/index');
			}
		},
		loginFun(type = 1, success, fail) {
			//1学生 2教师
			let _this = this;
			app.globalData.userIdentity = type==1?0:1;
			uni.login({
				success: ({ code }) => {
					request({
						url: `${app.globalData.BASE_URL}/${type == 1 ? 'api' : 'teacher'}/v1/user/auth?code=${code}`
					}).then(({ code, data, msg }) => {
						switch (Number(code)) {
							case 1:
								_this.showToast('登录成功,正在跳转...');
								app.globalData.LOGION = true;
								app._log('token',type == 1?data.token:data.teachertoken)
								uni.setStorageSync('app_token', type == 1?data.token:data.teachertoken);
								uni.setStorageSync('user_identity', type);
								_this.pageTo('/pages/index/index');
							case 9997:
								uni.setStorageSync('wxapp_openid', data.wxapp_openid);
								break;
							case 991:
								_this.showToast(msg || '您是学生，请登录学生端');
								break;
							case 992:
								_this.showToast(msg || '您是老师，请登录老师端');
								break;
							default:
								_this.showToast(msg || '请稍后再试');
								break;
						}
						success && success(code);
					});
				}
			});
		},
		// 获取手机号
		getWxPhone(e) {
			let { encryptedData, iv } = e.detail;
			if (encryptedData && iv) {
				app._log(encryptedData, iv);
				let _this = this;
				this.loginFun(2, code => {
					if (code == 1) {
						setTimeout(() => {
							_this.pageTo('/pages/index/index');
						}, 1500);
					} else if (code == 9997) {
						// 只有未登录的才处理
						API.decrypt({
							wxapp_openid: uni.getStorageSync('wxapp_openid'),
							encryptedData: encryptedData,
							iv: iv
						}).then(({ code, data, msg }) => {
								if (code == 1) {
									uni.setStorageSync('user_phone',data.phoneNumber),
									_this.pageTo('/pages/teacher/write_info/index');
								} else {
									this.showToast(msg || '获取手机号失败');
								}
							})
							.catch(err => {
								this.showToast(err.msg || '获取手机号失败');
							});
					}
				});
			} else {
				this.showToast('教师身份需要授权');
			}
		}
	}
};
</script>

<style scoped lang="scss">
	.star_page {
		position: fixed;
		left: 0;
		top: 0;
	}
	.star_page {
		width: 100vw;
		height: 100vh;
		z-index: 5002;
		background-color: #fff;
		overflow: hidden;
		image {
			width: 558rpx;
			height: 558rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}
.page {
	padding: 0 48rpx;
	position: relative;
	overflow: hidden;
	&:not(.bgs){
		background-color: white;
	}
	&.bgs{
		background-image: linear-gradient(333deg, #7f4aff 0%, #aa54ff 100%);
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		min-height: 100vh;
	}
	
	.select_top{
		width: 820rpx;
		left: 0;
		top: 0rpx;
	}
	
	.select_bottom{
		width: 800rpx;
		left: 0;
		bottom:0rpx;
	}
	
	.title_box {
		.welcome_text{
			opacity: 0.8;
		}
	}
	.choose_box {
		& > view {
			position: relative;
		}
	}
	.title {
		padding: 104rpx 0 14rpx 0;
	}
	.m-t-10 {
		padding-bottom: 10rpx;
	}
	.box1-margin {
		margin-bottom: 56rpx;
		margin-top: 80rpx;
	}
	.box {
		width: 100%;
		background-color: #fff;
		border-radius: 24rpx;
		padding: 8rpx 0;
		position: relative;
		z-index: 1;
		.icon image {
			width: 232rpx;
			height: 232rpx;
			margin-right: 48rpx;
			margin-left: 24rpx;
		}
		.identity{
			flex: 1;
		}
		.select_view{
			position: relative;
			width: 28px;
			height: 28px;
			margin-right: 24rpx;
			.select_icon{
				display: block;
				width: 28px;
				height: 28px;
				background-color: #ffffff;
				border: solid 1px #d1d2db;
				border-radius: 50%;
				&.active{
					border-color: #9254FF;
				}
			}
			.select_img{
				position: absolute;
				width: 22px;
				height: 22px;
				top: 3px;
				left: 3px;
			}
		}
	}
	.confirm{
		padding-top: 88rpx;
		width: 654rpx;
		text-align: center;
		position: relative;
		z-index: 1;
		.text{
			opacity: 0.5;
		}
		.btn_view{
			margin: 24rpx auto 0;
			border-radius: 50%;
			border: 1.6rpx solid #AA44FF;
			width: 160rpx;
			height: 160rpx;
			image{
				width: 58rpx;
				height: 46rpx;
				padding: 40rpx 36rpx 42rpx 34rpx;
				box-sizing: unset;
				background-color: #fff;
				border-radius: 50%;
				border: 16rpx solid #9152FE;
				box-shadow: 0rpx 16rpx 24rpx 0rpx rgba(0, 0, 0, 0.01);
				transition: 0.5s;
				&.op{
					opacity: .5;
				}
			}
		}
	}
}
.popup {
	width: 640rpx;
	height: 376rpx;
	background-color: #ffffff;
	border-radius: 24rpx;
	.top {
		padding: 48rpx;
		text-align: center;
		.title,
		.content {
			font-size: 34rpx;
			line-height: 48rpx;
			color: #666666;
			text-align: center;
		}
		.title {
			color: #000000;
			opacity: 0.9;
			margin: 0 auto 24rpx;
			padding: 0;
		}
	}
	.btn_bottom {
		width: 640rpx;
		height: 112rpx;
		display: flex;
		justify-content: space-between;
		.next_icon,
		.return_icon {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 34rpx;
			line-height: 48rpx;
			position: relative;
			border-top: 1rpx solid #f8f8f8;
		}
		.return_icon {
			color: #666666;
			opacity: 0.9;
			border-right: 1rpx solid #f8f8f8;
		}
		.return_icon {
			color: #333333;
		}
	}
}
</style>
